<template>
   
  <div id="app" class="diyi1">

  <div class="diyi">
    
     <router-link :to="{name:'child'}">产品主页</router-link>
   
     <router-link :to="{name:'childb'}">最新信息</router-link>
    
     <router-link :to="{name:'childc'}">产品推介</router-link>
    
     <router-link :to="{name:'childd'}">寻找分店</router-link>
    
     <router-link :to="{name:'childe'}">会员中心</router-link>
     <div class="diyi2">
      
      <span>News</span> &nbsp;
      <span>&nbsp;product</span>
      <span>stores</span>&nbsp;
      <span>Member</span>
      <span>About</span>
  </div>
  </div>
  <div>
      <router-view></router-view>
    
  </div>
  
    
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style scoped>
a{color: black;
  text-decoration:none
}
.diyi1{
      
      
       display: flex;
       /* margin-left: 300px; */       
       /* border: 1px solid red; */
       height: 100px;
       width: 1528px;
       background-color:white;
       box-shadow:  0px 0px 20px 0px rgba(0, 0, 1, 0.2);
       position: absolute;
       top: 690px;
       left: 0px;
      
    
  
}
.diyi a:hover{
  color: rgb(165, 227, 90);
  
      
}
.diyi a{
         margin:0px 50px;  
         position: relative;
         top: 40px;
         left: 460px;  
        
                  
}
.diyi{
        position: absolute;
        top: 10px;
        left: 50px;
        
}
.diyi2 span{ width: 1px;
          height: 20px;
          margin-left: 120px;
          position: relative;
          left: 398px;
          top: 2px;
          font-size: 5px;
          color: rgb(244, 184, 3);
        
}
</style>
